<html>
<head>
<title>Chrome Dictionary Lite Options</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("language", "1");

// Saves options to localStorage.
function save_options() {
  var select = document.getElementById("languages");
  var lang = select.children[select.selectedIndex].value;
  localStorage["translate_to"] = lang;

  // Update status to let user know options were saved.
  var status = document.getElementById("status");
  status.innerHTML = "Options Saved.";
  setTimeout(function() {
    status.innerHTML = "";
  }, 750);
}

// Restores select box state to saved value from localStorage.
function restore_options() {
  var favorite = localStorage["translate_to"];
  if (!favorite) {
    return;
  }
  var select = document.getElementById("languages");
  for (var i = 0; i < select.children.length; i++) {
    var child = select.children[i];
    if (child.value == favorite) {
      child.selected = "true";
      break;
    }
  }
}

function OnLoad(){
  // Get the Languages array so we can be lazy
  var languages = google.language.Languages;

  // get the list
  var languages_holder = document.getElementById('languages');

  // now we loop through the languages array
  for (var i in languages) {
    languages_holder.add(new Option(i, languages[i]));
  }
}

google.setOnLoadCallback(OnLoad);
</script>
</head>

<body onload="restore_options()">

Translate to:
<select id="languages">
</select>

<br>
<button onclick="save_options()">Save</button>
<br>
<a id="status"></a>
</body>
</html>